<template>
  <el-row>
    <el-collapse-item title="自定义设置" name="12" v-if="showType==='pc'">
      <el-form-item label="数据类型">
        <el-radio-group v-model="activeData.dataType" size="small" @change="dataTypeChange">
          <el-radio-button label="static">静态数据</el-radio-button>
          <el-radio-button label="dynamic">远端数据</el-radio-button>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="数据设置" v-if="activeData.dataType==='static'">
        <el-button @click="showData(activeData.option)">查看</el-button>
      </el-form-item>
      <template v-if="activeData.dataType==='dynamic'">
        <el-form-item label="数据接口">
          <interface-dialog :value="activeData.propsApi" :title="activeData.propsName"
                            popupTitle="数据接口" @change="propsApiChange" />
        </el-form-item>
        <el-form-item label="参数设置" v-if="activeData.templateJson && activeData.templateJson.length">
          <SelectInterfaceBtn :templateJson="activeData.templateJson" :showSystemFormId="false"
                              :type="2" />
        </el-form-item>
      </template>

      <Refresh v-if="activeData.dataType==='dynamic'&&activeData.propsApi"
        :refresh="activeData.refresh" />
    </el-collapse-item>
<!--    app端-->
    <el-collapse-item title="自定义设置" name="12" v-else >
      <el-form-item label="数据类型">
        <el-radio-group v-model="activeData.appDataType" size="small" @change="appDataTypeChange">
          <el-radio-button label="static">静态数据</el-radio-button>
          <el-radio-button label="dynamic">远端数据</el-radio-button>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="数据设置" v-if="activeData.appDataType==='static'">
        <el-button @click="showData(activeData.appOption)">查看</el-button>
      </el-form-item>
      <template v-if="activeData.appDataType==='dynamic'">
        <el-form-item label="数据接口" >
          <interface-dialog :value="activeData.appPropsApi" :title="activeData.appPropsName"
                            popupTitle="数据接口" @change="appPropsApiChange" />
        </el-form-item>
        <el-form-item label="参数设置" v-if="activeData.appTemplateJson && activeData.appTemplateJson.length">
          <SelectInterfaceBtn :templateJson="activeData.appTemplateJson" :showSystemFormId="false"
                              :type="2" />
        </el-form-item>
      </template>
      <Refresh v-if="activeData.appDataType==='dynamic'&&activeData.appPropsApi"
               :refresh="activeData.appRefresh" />
    </el-collapse-item>
    <JSONArea v-if="areaVisible" ref="JSONArea" @refresh="updateOption" />
  </el-row>
</template>
<script>
const barTypeList = [
  { label: '柱体', value: 'bar' },
  { label: '折线', value: 'line' }
]
const mappingList = [
  { id: 1, field: '系列', value: '' },
  { id: 2, field: '维度', value: '' },
  { id: 3, field: '数值', value: '' },
  { id: 4, field: '最大值', value: '' },
  { id: 5, field: '时间戳', value: '' },
  { id: 6, field: '经度', value: '' },
  { id: 7, field: '纬度', value: '' },
];
import { getDataInterfaceInfo } from '@/api/systemData/dataInterface';
import SelectInterfaceBtn from '@/components/SelectInterfaceBtn'
import JSONArea from '../../components/JSONArea'
import InterfaceDialog from '@/components/Process/PropPanel/InterfaceDialog'
import Refresh from '../common/Refresh'
import draggable from 'vuedraggable';
export default {
  props: ['activeData','showType'],
  components: {
    draggable,
    JSONArea,
    InterfaceDialog,
    Refresh,
    SelectInterfaceBtn
  },
  data() {
    return {
      allOptions:[],
      areaVisible: false,
      barTypeList: barTypeList,
      showParameter: false
    }
  },
  mounted(){
  },
  methods: {
    showData(option) {
      this.areaVisible = true
      this.$nextTick(() => {
        this.$refs.JSONArea.init(option)
      })
    },
    updateOption(data) {
      this.activeData.option.defaultValue = data ? JSON.parse(data) : []
    },
    dataTypeChange() {
      this.activeData.propsApi = ''
      this.activeData.propsName = ''
    },
    propsApiChange(val, item) {
      if (val) {
        this.activeData.propsApi = val
        this.activeData.propsName = item.fullName
        this.activeData.templateJson = item.parameterJson ? JSON.parse(item.parameterJson).map(o => ({ ...o, relationField: '', sourceType: 2 })) : []
        this.allOptions = item.fieldJson ? JSON.parse(item.fieldJson).map(o => ({ ...o, value: o.defaultValue })) : [];

      } else {
        this.activeData.propsApi = ''
        this.activeData.propsName = ''
        this.allOptions = []
      }
    },
    appDataTypeChange() {
      this.activeData.appPropsApi = ''
      this.activeData.appPropsName = ''
    },
    appPropsApiChange(val, item) {
      if (val) {
        this.activeData.appPropsApi = val
        this.activeData.appPropsName = item.fullName
        this.activeData.appTemplateJson = item.parameterJson ? JSON.parse(item.parameterJson).map(o => ({ ...o, relationField: '', sourceType: 2 })) : []
        this.allOptions = item.fieldJson ? JSON.parse(item.fieldJson).map(o => ({ ...o, value: o.defaultValue })) : [];

      } else {
        this.activeData.appPropsApi = ''
        this.activeData.appPropsName = ''
        this.allOptions = []
      }

      console.log(this.activeData.appPropsApi,1214)
    },
  }
}
</script>
<style lang="scss" scoped>
.opacity5 {
  opacity: 0.5;
}
::v-deep .select-item,
.select-item {
  display: flex;
  border: 1px dashed #fff;
  box-sizing: border-box;
  & .el-input + .el-autocomplete {
    margin-left: 4px;
  }
  & + .select-item {
    margin-top: 4px;
  }
  &.sortable-chosen {
    border: 1px dashed #409eff;
  }
  .select-line-icon {
    line-height: 32px;
    font-size: 22px;
    padding: 0 4px;
    color: #606266;
    .icon-ym-darg {
      font-size: 20px;
      line-height: 31px;
      display: inline-block;
    }
  }
  .close-btn {
    cursor: pointer;
    color: #f56c6c;
  }
  .option-drag {
    cursor: move;
  }
}
</style>
